<template>
  <div class="header">
    <div class="left">
      <i class="iconfont icon-caipiao1"></i>
      <span>彩票-管理系统</span>
    </div>
    <div class="right">
      <avatar :username="user.username||'a'" :size="40"></avatar>
      <el-dropdown>
        <span class="el-dropdown-link">
          {{user.username || '用户名'}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item>用户信息</el-dropdown-item> -->
          <el-dropdown-item @click.native="handleSignout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import Avatar from 'vue-avatar'
import { mapActions } from 'vuex'
export default {
  name: 'headNav',
  components: { Avatar },
  data () {
    const user = localStorage.getItem('user')
    return {
      user: user && JSON.parse(user)
    }
  },
  methods: {
    ...mapActions({
      getLogout: 'login/getLogout'
    }),
    handleSignout () {
      localStorage.setItem('token', '')
      this.getLogout().then(() => {
        localStorage.removeItem('user')
        this.$message.success('退出登录成功')
        this.$router.push('/login')
      })
    }
  }
}
</script>
<style lang="less">
  .header {
    height: 100%;
    .el-dropdown {
      margin-left: 15px;
      span {
        color: #ffffff;
      }
    }
    .left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 100%;
      width: 300px;
      float: left;
      i {
        font-size: 40px;
        color: #ffffff;
      }
      span {
        margin-left: 15px;
        color: #ffffff;
        font-size: 16px;
      }
    }
    .right {
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
      width: 200px;
      float: right;
    }
  }
</style>
